<!--
 * @Author: your name
 * @Date: 2021-03-28 12:43:06
 * @LastEditTime: 2021-05-26 20:41:41
 * @LastEditors: Please set LastEditors
 * @Description: 首页-点击搜索
 * @FilePath: /medicine-web/src/views/main/search/index.vue
-->
<template>
  <div class="main-search-container">
    <div class="main-search__title">{{filterMap && filterMap.tumor_type ? formatView(filterMap.tumor_type) : ''}}{{filterMap && filterMap.virus_type && filterMap.tumor_type ? '、' : ''}}{{filterMap && filterMap.virus_type ? formatView(filterMap.virus_type) : ''}}</div>
    <div class="font-pattern-2">共有 {{totalNum}} 条相关内容</div>
    <div class="main-search__result">
      <a-menu v-model="currentTab" mode="horizontal" class="tab-result__outter">
        <a-menu-item v-for="item in tabList" :key="item.label">{{item.label}}</a-menu-item>
      </a-menu>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'mainSearch',
  components: {},
  data () {
    return {
      currentTab: ['文献集锦'],
      tabList: [
        { label: '文献集锦', value: 1 },
        { label: '临床试验', value: 2 },
        { label: '会议进展', value: 3 },
        { label: '药企资讯', value: 4 },
        { label: '材料总结', value: 5 },
        { label: 'Q&A', value: 6 },
      ]
    }
  },
  methods: {
    formatView (raw) {
      const rawArray = raw.split(';')
      let temp = ''
      if (rawArray && rawArray.length > 0) {
        for (const item of rawArray) {
          temp += rawArray.indexOf(item) == rawArray.length - 1 ? item : item + '、'
        }
      }
      return temp
    },
    onChange (e) {
      console.log('onChange===========', e)
    },
    handlePage (count) {
      console.log('handlePage=============', count)
    },
    download (item) {
      item.isDownload = !item.isDownload
    },
    share (item) {
      item.isShare = !item.isShare
    },
    collection (item) {
      item.isCollect = !item.isCollect
    },
    showQQ (item) {
      item.isShare = false
    },
    showWeibo (item) {
      item.isShare = false
    },
    showXinLang (item) {
      item.isShare = false
    },
    showWechat (item) {
      item.isShare = false
    }
  },
  created () {
    this.currentTab = [this.getLocalStorage('currentTab')]
    switch (this.currentTab[0]) {
      case '文献集锦':
        this.$router.replace('/simple/search/document', this.$router.length - 1)
      break;
      case '临床试验':
        this.$router.replace('/simple/search/clinical', this.$router.length - 1)
      break;
      case '会议进展':
        this.$router.replace('/simple/search/meeting', this.$router.length - 1)
      break;
      case '上市产品':
        this.$router.replace('/simple/search/products', this.$router.length - 1)
      break;
      case '药企资讯':
        this.$router.replace('/simple/search/realinfo', this.$router.length - 1)
      break;
      case '材料总结':
        this.$router.replace('/simple/search/summary', this.$router.length - 1)
      break;
      case 'Q&A':
        this.$router.replace('/simple/search/qanda', this.$router.length - 1)
      break;
      default:
        this.$router.replace('/simple/search/document', this.$router.length - 1)
      break;
    }
  },
  mounted () {
    window.onscroll = (e) => {
      for (let item of this.$router.options.routes[4].children[1].children[0].children) { // 保持menus状态
        item.meta.y = window.pageYOffset
      }
    }
  },
  beforeDestroy () {
    window.removeEventListener('scroll', () => {}, false)
    this.setLocalStorage('currentTab', ['文献集锦'])
  },
  computed: {
    ...mapGetters({
      filterMap: 'filterMap',
      totalNum: 'totalNum',
      resetCurrentTab: 'resetCurrentTab'
    })
  },
  watch: {
    currentTab: function (val, oldVal) {
      switch (val[0]) {
        case '文献集锦':
          this.$router.replace('/simple/search/document', this.$router.length - 1)
        break;
        case '临床试验':
          this.$router.replace('/simple/search/clinical', this.$router.length - 1)
        break;
        case '会议进展':
          this.$router.replace('/simple/search/meeting', this.$router.length - 1)
        break;
        case '上市产品':
          this.$router.replace('/simple/search/products', this.$router.length - 1)
        break;
        case '药企资讯':
          this.$router.replace('/simple/search/realinfo', this.$router.length - 1)
        break;
        case '材料总结':
          this.$router.replace('/simple/search/summary', this.$router.length - 1)
        break;
        case 'Q&A':
          this.$router.replace('/simple/search/qanda', this.$router.length - 1)
        break;
        default:
          this.$router.replace('/simple/search/document', this.$router.length - 1)
          break;
      }
      this.setLocalStorage('currentTab', val[0])
    },
    resetCurrentTab: function (val, oldVal) {
      this.currentTab = ['文献集锦']
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/flex.scss';
@import '~@/assets/styles/common.scss';
.main-search-container {
  padding: 44px 0px 66px 0px;
  width: 1200px;
  margin: 0 auto;
  .main-search__title {
    font-size: 30px;
  }
  .main-search__result {
    margin-top: 41px;
    .main-search__result-container {
      .main-search__result-item {
        @include flex-def;
        .main-search__result-content {
          width: 100%;
          margin-left: 8px;
          li:nth-child(n+2) {
            margin-top: 10px;
            font-size: 14px;
            color: #555;
          }
          li:nth-child(1) {
            font-size: 14px;
            color: #555;
            font-weight: bold;
          }
          .main-search__result-func {
            @include flex-def;
            @include flex-cCenter;
            @include flex-zBetween;
          }
        }
      }
    }
  }
}
</style>